<template>
	<view class="w100p common_wrap">
		<CommonHeader :title="$t('商城')" color="#262728"  :is-right="false">
		</CommonHeader>
		<view class="flex-start mt-50 w100p" >
			<template v-for="(item, index) in listTitle" >
				<view class="ml-35 commonSty" :class="{ activeSty: currentxxx == index }"
				 @click="changeTitle(index)" v-if="(index != 2 && lang == 'zh' || lang == 'ru') && index != 0">
					{{ item }}
				</view>
			</template>
		</view>

		<view class="w100p common_search" @click="goSearch" v-if="currentxxx == 1 || currentxxx == 2">
			<view class="flex-box w100p search_wrap">
				<uni-icons type="search" size="36rpx" color="#262728"></uni-icons>
				<text class="flex-item text">{{ $t('搜索') }}</text>
				<!-- <view class="btn_wrap">
					<text>{{ $t('商品') }}</text>
					<uni-icons type="right" size="32rpx" color="#fff"></uni-icons>
				</view> -->
			</view>
		</view>
		<view class="w100p pr list_block" v-if="currentxxxGood == 1 " v-show="currentxxx == 1 || currentxxx == 2" >
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="w100p scroll-Y" refresher-enabled="true" @scrolltolower="lower" @refresherrefresh="fresh"
				refresher-background="transparent" :refresher-triggered="isRefresher" @refresherrestore="store" @touchmove.stop>
				<tipSl :text="$t('【小贴士】网购时请认准卖家资质、勿私下转账、保护个人信息，安心购物！')" style="margin: 0;background-color: transparent;padding-left:0;padding-right: 0;"></tipSl>
				<view class="w100p category_wrap">
					<scroll-view class="w100p scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" v-for="item in categoryList" :key="item.id" @click="firstCategory(item.id)">
							<image class="goback_img" :src="item[plang('pic')]" mode="widthFix"></image>
						</view>
					</scroll-view>
				</view>
				<view class="w100p pr tabs_wrap">
					<u-tabs ref="uTabs" font-size="28" gutter="44" bg-color="transparent" active-color="#0097FF" inactive-color="#606366" :list="subCategoryList" :current="current"
						@change="tabsChange" :is-scroll="true" bar-height="12" ></u-tabs>
					<view class="pa filter_img" @click="filterOption">
						<image class="img" :src="getImageUrl(`/shopstatic/filter.png`)" mode="widthFix" ></image>
					</view>
				</view>
				<template v-if="!!dataList && !!dataList.length">
					<view class="w100p flex-box list_wrap" v-for="(item, index) in dataList" :key="index">
						<view class="list_item" v-for="subItem in item.shop" :key="subItem.id" @click="goDetails(1, subItem.id, subItem.yj_id,subItem)">
							<view class="w100p img_wrap">
								<image class="img" :src="subItem[plang('pic')] || subItem.pic" mode="aspectFill" ></image>
							</view>
							<view class="w100p flex-item con_wrap">
								<view class="w100p list_name">
									{{ subItem[plang('name')] || $t("暂无名称") }}
								</view>
								<view class="w100p flex-box price_wrap">
									<template v-if="subItem.offerId">
										<text class="flex-none unit">{{ "￥"}}</text>
										<text class="flex-item ellipsis num">{{ subItem.sell_price || 0 }}</text>
									</template>
									<template v-else>
										<text class="flex-none unit">{{ subItem.currency || '￥' }}</text>
										<text class="flex-item ellipsis num">{{ subItem.sell_price || 0 }}</text>
									</template>
									
									<view class="flex-none look">
										<uni-icons type="eye" size="28rpx" color="#606366"></uni-icons>
										<text> {{ subItem.viewnum > 100 ? "100+" : subItem.viewnum }}</text>
									</view>
								</view>
								<view class="w100p flex-box shop_wrap" v-if="subItem.merchant">
									<view class="flex-none shop_img">
										<image class="img" :src="subItem.merchant.logo || '/static/default.png'" mode="aspectFill"></image>
									</view>
									<view class="flex-item name_wrap">
										<view class="pr shop_name ellipsis">
											{{ subItem.merchant[plang('name')] || $t("暂无名称") }}
											<image class="pa img" :src="getVipImg(subItem.merchant.isvip)" mode="widthFix"></image>
										</view>
									</view>
									<view class="flex-none country_img">
										<image class="img" :src="createNationalCircle(subItem.merchant.country).imgurl" mode="aspectFill"></image>
										
									</view>
								</view>
								<view class="w100p flex-box shop_wrap" v-else>
									<view class="flex-none shop_img">
										<image class="img" :src="getImageUrl(`/shopstatic/gluz.png`)" mode="aspectFill"></image>
									</view>
									<view class="flex-item ellipsis pr shop_name">
										GLUZ
									</view>
								</view>
							</view>
						</view>
						<view class="w100p inline-flex" v-if="!!item.adv && !!item.adv.length">
							<view class="w100p discount_item" v-for="subItem in item.adv" :key="subItem.id" @click="goDetails(1, subItem.id, subItem.yj_id,subItem)">
								<view class="w100p pr img_wrap">
									<image class="img" :src="subItem[plang('pic')] || subItem.pic " mode="aspectFill"></image>
									<!-- 中文 -->
									<text class="label" v-if="lang == 'zh'">折扣</text>
									<!-- 俄语 -->
									<text class="label-ru" v-if="lang== 'ru'">СКИДКА</text>

								</view>
								<view class="w100p flex-item con_wrap">
									<view class="w100p list_name">
										{{ subItem[plang('name')] || $t("暂无名称") }}
									</view>
									<view class="w100p flex-box price_wrap">
										<text class="flex-none unit">{{ subItem.currency || '￥' }}</text>
										<text class="flex-item ellipsis num">{{ subItem.sell_price || 0 }}</text>
										<view class="flex-none look">
											<uni-icons type="eye" size="28rpx" color="#606366"></uni-icons>
											<text> {{ subItem.viewnum > 100 ? "100+" : subItem.viewnum }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="w100p inline-flex swiper_wrap" v-if="!!item.swiper && !!item.swiper.length">
							<u-swiper class="w100p" :list="item.swiper" :effect3d="item.swiper.length !== 1" mode="none" bg-color="transparent"
								@click="clickSwiper(item.swiper, $event)"></u-swiper>
						</view>
					</view>
					<view class="w100p tc pb-20" v-if="isData">
						{{ $t("没有更多了") }}
					</view>
				</template>
				<view v-else class="w100p pr empty_wrap">
					<view class="empty">
						<u-empty :text="$t('数据为空')" mode="list"></u-empty>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="w100p pr list_block" v-show="currentxxx == 0 && false" style="padding: 0;">
			<factory></factory>
		</view>
		<u-popup v-model="filterOpen" mode="bottom" :safe-area-inset-bottom="true" border-radius="24" :closeable="true" close-icon="close-circle" close-icon-size="44"
			@close="closeFilter">
			<view class="w100p filter_wrap">
				<scroll-view class="w100p filter_scroll" scroll-y="true">
					<view class="sort_wrap" v-if="!!thrCategoryList && !!thrCategoryList.length">
						<view class="w100p title">{{ $t('商品类型') }}</view>
						<view class="w100p flex-box item_wrap">
							<view class="item" v-for="item in thrCategoryList" :key="item.id" :class="{active: item.active}" @click="activeFilterS(item)">{{item[plang('name')]}}</view>
						</view>
					</view>
					<view class="sort_wrap">
						<view class="w100p title">{{ $t('排序') }}</view>
						<view class="w100p flex-box item_wrap">
							<view class="item" v-for="item in sortList" :key="item.id" :class="{active: item.active}" @click="activeFilterD(item)">
								{{item[plang('name')]}}
							</view>
						</view>
					</view>
					<view class="w100p btn_wrap">
						<view class="btn" @click="submitFilter">
							{{ $t('确定') }}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<CommonLoading :show="isLoading"></CommonLoading>
	</view>
</template>

<script>
	import vipImg1 from '@/static/detail/vip_1.png';
	import vipImg2 from '@/static/detail/vip_2.png';
	import vipImg3 from '@/static/detail/vip_3.png';
	import vipImg4 from '@/static/detail/vip_4.png';
	import CommonHeader from "../components/common-header.vue";
	import { createNationalCircle } from '@/assets/public';
	import factory from './components/factory.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			CommonHeader,
			factory
		},
		data() {
			return {
				listTitle: [this.$t('工厂'), this.$t('商品'),this.$t('免费样品')],
				// listTitle: [this.$t('商品'),this.$t('免费样品')],

				currentxxx: 1,
				currentxxxGood: 1,
				categoryList: [],
				subCategoryList: [],
				thrCategoryList: [],
				dataList: [],
				current: 0,
				isLoading: false,
				scrollTop: 0,
				page: 1,
				advPage: 1,
				swiperPage: 1,
				limit: 12,
				isData: false,
				shopId: "",
				isRefresher: false,
				filterOpen: false,
				sortList: [{
						name: "查看升序",
						name_ru: 'По возрастанию',
						id: 1,
						active: false,
					},
					{
						name: "查看降序",
						name_ru: 'По убыванию',
						id: 2,
						active: false,
					},
					{
						name: "价格升序",
						name_ru: 'Дешевле',
						id: 3,
						active: false,
					},
					{
						name: "价格降序",
						name_ru: 'Дороже',
						id: 4,
						active: false,
					},
				],
				field: "",
				order: "",
			}
		},
		async onLoad(val) {
			// window.setParams = (data) => {
			// 	this.dataAll = data;
			// 	this.$store.commit("setCommonData", data);
			// 	uni.setStorageSync("lang", data.lang);
			// 	uni.setStorageSync("xzdToken", data.token);
			// 	uni.setStorageSync("mobile", data.mobile);
			// 	uni.setStorageSync("statusbottom", data.statusbottom);
			// }

		},
		computed: {
			// 使用mapState生成计算属性
			...mapState({
				lang: state => state.commonData.lang,
			})
		},
		watch: {
			lang(newValue, oldValue) {
				console.log('lang changed:', newValue);
			},
		},
		mounted() {
			
			this.$nextTick(async () => {

				try {
					this.isLoading = true;
					const {
						data
					} = await this.$u.api.shopping.getCategory({});
					this.categoryList = data;
					if (!!data?.length) {
						this.firstCategory(data[0].id);
					} else {
						this.subCategoryList = [{
							name: this.lang == 'zh' ? '全部' : 'Все',
						}]
						this.thrCategoryList = [];
						this.isLoading = false;

					}
				} catch (e) {
					this.isLoading = false;
				}
			})
		},
		methods: {
			changeTitle(index) {
				if (index == 2) {
					this.currentxxxGood = 1;
				}
				if (index == 1) {
					this.currentxxxGood = 1;
				}
				this.currentxxx = index
				if (index == 1 || index == 2) {
					this.getData();
				}
			},
			createNationalCircle,
			getVipImg(val) {
				switch (val) {
					case 0:
						return vipImg1;
					case 1:
						return vipImg2;
					case 2:
						return vipImg3;
					case 3:
						return vipImg4;
					default:
						break;
				}
			},
	
			// 跳转搜索页
			goSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			// 跳转详情页
			async goDetails(val, id, cid,subItem) {
				switch (val) {
					case 1:
						if (subItem.offerId){
							if (!id) {
								let res = await this.$u.api.shopping.addproduct({
									offerId: subItem.offerId,
									name: subItem.subject,
								});
								id = res.data.aid;
							}
							uni.navigateTo({
								url: '/pages/details/shopDetail1688?id=' + id + '&offerId=' + (subItem.offerId || '') + '&offer_price=' + (subItem.sell_price || '')
							})
							return;
						}
						if (cid == 'xxxxxxxxxxxxxx') {
					
							let res = await this.$u.api.shopping.getProduct({
								id: id,
							});
							if (res.code == 0) {
								uni.showToast({
									title: res[this.plang('msg')],
									icon: 'none',
								})
								return;
							}
							uni.navigateTo({
								url: '/pages/details/carDetail?id=' + id
							})
						} else {
						
							let res = await this.$u.api.shopping.getProduct({
								id: id,
							});
							if (res.code == 0) {
								uni.showToast({
									title: res[this.plang('msg')],
									icon: 'none',
								})
								return;
							}
							uni.navigateTo({
								url: '/pages/details/shopDetail?id=' + id
							})
						}

						break;
					case 2:
						uni.navigateTo({
							url: '/pages/details/merchantDetail?bid=' + id
						})
						break;
					default:
						break;
				}
			},
			// 二级分类切换
			tabsChange(val) {
				if (this.isLoading) return;
				this.page = 1;
				this.field = "";
				this.order = "";
				this.current = val;
				this.shopId = this.subCategoryList[val].id.toString();
				this.thrCategoryList = (this.subCategoryList[val].child || []).map(item => {
					let obj = {
						active: false,
						...item
					}
					return obj;
				});
				this.getData();
			},
			// 获取二级分类
			async firstCategory(val) {
				if (!val) return;
				this.isLoading = true;
				try {
					let {
						data
					} = await this.$u.api.shopping.getSubCategory({
						id: val,
					});
					this.isLoading = false;
					if (!!data?.length) {
						// 總後台設置的此時這個字段為空 待總後台打完再開啟這個
						data = data.map((ele)=> {
							ele.name = ele[this.plang('name')]
							return ele;
						})
						this.subCategoryList = data;
						this.isLoading = false;
						this.tabsChange(0)
					} else {
						this.subCategoryList = [{
							name: this.lang == 'zh' ? '全部' : 'Все',
						}]
						this.thrCategoryList = [];
						this.shopId = val.toString();
						this.page = 1;
						this.advPage = 1;
						this.swiperPage = 1;
						this.field = "";
						this.order = "";
						this.isLoading = false;

						this.getData();
					}
				} catch (e) {}
			},

			// 触底加载
			lower() {
				if (this.isData) return;
				this.page++;
				this.advPage++;
				this.swiperPage++;
				this.getData();
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1;
				this.advPage = 1;
				this.swiperPage = 1;

				this.isRefresher = true;
				this.isData = false;

				this.getData();
			},
			// 下拉刷新复位
			store() {
				this.isRefresher = false;
			},
			// 获取列表
			async getData() {
				if (this.isLoading) return;
				this.isLoading = true;
				// uni.showLoading({
				// 	title:'loading...',
				// })
				try {
					const {
						data
					} = await this.$u.api.shopping.getprolist({
						cid: this.shopId,
						pagenum: this.page,
						keyword: "",
						field: this.field,
						order: this.order,
						pagesize: 24,
						lang: this.lang,
						isZero: this.currentxxx == 2 ? 1 : 0,
					});
					
					// 首页置空数据
					if (this.page === 1) {
						this.dataList = [];
					}
					// 每页最多12条数据，分两组
					if (!!data?.length) {
						// 每6条数据加一组广告
						let obj = {
							shop: [],
							adv: [],
							swiper: [],
						};
						let obj1 = {
							shop: [],
							adv: [],
							swiper: [],
						};
						data.map((item, index) => {
							if (index < 12) {
								obj.shop.push(item);
							} else {
								obj1.shop.push(item);
							}
						})


						let advRes = [];
						let swiperRes = [];
						// 大于12条，加载广告
						if (data.length > 0) {
							advRes = await this.$u.api.shopping.getprolist({
								cid: this.shopId,
								pagenum: this.advPage,
								keyword: "",
								gid: 4,
								field: this.field,
								order: this.order,
								pagesize: 6,
								lang: this.lang,
							});
							swiperRes = await this.$u.api.shopping.getpllist({
								pagenum: this.swiperPage,
								field: this.field,
								order: this.order,
								pagesize: 10,
								tfwz: 0,
							});
						}

						if (!!advRes?.data?.length) {
							advRes.data.map((item, index) => {
								if (index < 3) {
									obj.adv.push(item);
								} else {
									obj1.adv.push(item);
								}
							})
						}
						if (!advRes?.data?.length || advRes.data.length < 6) this.advPage = 1;

						if (!!swiperRes?.data?.length) {
							let num = 0;
							swiperRes.data.map((item, index) => {
								if (!item.pic) return;
								let subObj = {
									image: item[this.plang('pic')] || item.pic,
									...item
								}
								if (num < 6) {
									obj.swiper.push(subObj);
								} else {
									obj1.swiper.push(subObj);
								}
								num++;
							})
						}
						if (!swiperRes?.data?.length || swiperRes.data.length < 6) this.swiperPage = 1;
						this.dataList.push(obj);
						if (data.length > 12) this.dataList.push(obj1);

						console.log(data.length,'data.lengthdata.length')
						// 数据不足24条，禁止上拉加载
						if (data.length < 24) {
							this.isData = true;
						} else {
							this.isData = false;
						}
					} else {
						this.isData = true;
						console.log('data.length数据到底了',data.length)
					}
					this.isLoading = false;
					this.isRefresher = false;
					uni.hideLoading();
				} catch (e) {
					this.isLoading = false;
					this.isRefresher = false;
					uni.hideLoading({})
				}
			},
			// 筛选栏
			filterOption() {
				let arr = this.shopId.split(",");
				arr.map(item => {
					this.thrCategoryList.map(subItem => {
						if (subItem.id == item) {
							subItem.active = true;
						}
					})
				})

				let str = "";
				if (this.field === "viewnum" && this.order == 'asc') {
					str = 1;
				}
				if (this.field === "viewnum" && this.order == 'desc') {
					str = 2;
				}
				if (this.field == 'sell_price' && this.order === "asc") {
					str = 3;
				}
				if (this.field == 'sell_price' && this.order === "desc") {
					str = 4;
				}
				this.sortList.map(item => {
					if (item.id === str) item.active = true;
				})



				this.filterOpen = true;
			},
			// 选择筛选选项
			activeFilterS(val) {
				val.active = !val.active;
			},
			// 选择筛选选项
			activeFilterD(val) {
				this.sortList.forEach(item => {
					item.active = false;
				})
				val.active = true;
			},
			// 关闭筛选栏
			closeFilter() {
				this.thrCategoryList.map(item => {
					item.active = false;
				})
				this.sortList.map(item => {
					item.active = false;
				})
			},
			// 确认筛选
			submitFilter() {
				let arr = [];
				this.thrCategoryList.map(item => {
					if (item.active) arr.push(item.id);
				})
				if (arr.length > 0) this.shopId = arr.join(",");
				let sort = "";
				this.sortList.map(item => {
					if (item.active) sort = item.id;
				})
				switch (sort) {
					case 1:
						this.field = "viewnum";
						this.order = "asc";
						break;
					case 2:
						this.field = "viewnum";
						this.order = "desc";
						break;
					case 3:
						this.field = "sell_price";
						this.order = "asc";
						break;
					case 4:
						this.field = "sell_price";
						this.order = "desc";
						break;
					default:
						this.field = "";
						this.order = "";
						break;
				}
				this.page = 1;
				this.advPage = 1;
				this.swiperPage = 1;
				this.filterOpen = false;
				this.getData();
			},
			clickSwiper(item, i) {
				if (!item[i]) return;
				if (item[i].yj_id == 'xxxxxxxxxxxxx') {
					uni.navigateTo({
						url: '/pages/details/carDetail?id=' + item[i].url_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/details/shopDetail?id=' + item[i].url_id
					})
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.right_title {
		font-size: 26rpx;
		line-height: 1.2;
		color: #262728;
		margin-right: 10rpx;
	}

	.common_search {
		padding: 20rpx 24rpx 0;
		// margin-bottom: 48rpx;
		margin-bottom: 20rpx;

		.search_wrap {
			background-color: #fff;
			padding: 6rpx 4rpx 6rpx 24rpx;
			height: 76rpx;
			border-radius: 76rpx;
			display: flex;
			align-items: center;
			justify-content: center;


			.text {
				padding: 0 8rpx;
				font-size: 24rpx;
				line-height: 1.2;
				color: #606366;
			}

			.btn_wrap {
				color: #fff;
				font-size: 24rpx;
				line-height: 1.2;
				height: 64rpx;
				border-radius: 64rpx;
				background: linear-gradient(to bottom, #CEE5F2, #6DA4CD);
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 142rpx;
				padding-left: 10rpx;
			}
		}
	}

	.category_wrap {
		// padding: 0 24rpx;
		margin-bottom: 24rpx;
		height: 342rpx;

		::v-deep .scroll-view_H {
			height: 100%;

			.uni-scroll-view-content {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: flex-start;

				.scroll-view-item_H {
					height: 48.3%;
					width: 270rpx;
					margin-right: 0;

					&:nth-child(3n + 1) {
						height: 100%;
					}

					.goback_img {
						width: 100%;
					}
				}
			}
		}
	}

	.tabs_wrap {
		// padding: 0 90rpx 0 24rpx;
		padding-right: 66rpx;
		height: 100rpx;

		.filter_img {
			padding: 0 24rpx;
			top: 16rpx;
			right: 0;
			display: flex;

			.img {
				width: 42rpx;
			}
		}
	}

	::v-deep .u-tab-bar {
		background-color: transparent;
		background: url('../../static/tabs.png') no-repeat !important;
		background-position: left top !important;
		background-size: 100% 100% !important;
		bottom: -6rpx;
	}

	.list_block {
		padding: 0 24rpx;
		flex: 1;
		overflow: hidden;

		.scroll-Y {
			height: 100%;
			overflow: hidden;
		}

		.list_wrap {
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;

			.list_item {
				margin-bottom: 24rpx;
				width: 342rpx;
				height: 486rpx;
				overflow: hidden;
				border-radius: 24rpx;
				background-color: #fff;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.08);

				.img_wrap {
					height: 254rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.con_wrap {
					padding: 16rpx 16rpx 8rpx;

					.list_name {
						height: 80rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: #262728;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						/* 定义显示的行数 */
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 10rpx;
					}

					.price_wrap {
						align-items: flex-end;
						padding-bottom: 10rpx;
						margin-bottom: 10rpx;
						border-bottom: 1px dashed #DBDBDB;

						.unit {
							font-size: 22rpx;
							line-height: 30rpx;
							color: #FF6A00;
							font-weight: 700;
						}

						.num {
							color: #FF6A00;
							font-size: 50rpx;
							font-weight: 700;
							line-height: 52rpx;
							padding-right: 10rpx;
						}

						.look {
							font-size: 20rpx;
							line-height: 28rpx;
							font-weight: 400;
							color: #606366;
							display: inline-block;
							align-items: center;
						}
					}

					.shop_wrap {
						justify-content: space-between;

						.shop_img,
						.country_img {
							width: 44rpx;
							height: 44rpx;
							border-radius: 100%;
							overflow: hidden;
							margin-right: 10rpx;
							display: inline-flex;

							.img {
								width: 100%;
								height: 100%;
							}
						}

						.country_img {
							margin-right: 0;
						}

						.name_wrap {
							display: inline-flex;
							align-items: center;
						}

						.shop_name {
							font-size: 24rpx;
							line-height: 1.2;
							color: #262728;
							padding-right: 28rpx;
							margin-right: 10rpx;
							max-width: 198rpx;
							display: inline-block;

							.img {
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
								z-index: 1;
								width: 24rpx;
							}
						}
					}
				}
			}

			.discount_item {
				margin-bottom: 40rpx;
				width: 224rpx;
				height: 306rpx;
				overflow: hidden;
				border-radius: 24rpx;
				background-color: #fff;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.08);
				margin-right: 16rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.img_wrap {
					height: 166rpx;
					position: relative;

					.img {
						width: 100%;
						height: 100%;
					}

					.label {
						position: absolute;
						left: -46rpx;
						top: -6rpx;
						z-index: 1;
						font-size: 22rpx;
						line-height: 40rpx;
						padding-top: 16rpx;
						width: 132rpx;
						background-color: #FF342A;
						text-align: center;
						color: #fff;
						transform: rotateZ(-45deg);
					}
					.label-ru {
						width: 108rpx;
						height: 35rpx;
						border-radius: 0px 24rpx 0px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFF;
						font-size: 18rpx;
						font-weight: 400;
						position: absolute;
						bottom: 0;
						left: 0;
						background: linear-gradient(180deg, rgba(255, 52, 42, 0.30) 0%, #FF342A 120%);
					}
				}

				.con_wrap {
					padding: 12rpx;

					.list_name {
						height: 68rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						font-weight: 500;
						color: #262728;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						/* 定义显示的行数 */
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 20rpx;
					}

					.price_wrap {
						align-items: flex-end;

						.unit {
							font-size: 18rpx;
							line-height: 26rpx;
							color: #FF6A00;
							font-weight: 700;
						}

						.num {
							color: #FF6A00;
							font-size: 36rpx;
							font-weight: 700;
							line-height: 38rpx;
							padding-right: 10rpx;
						}

						.look {
							font-size: 16rpx;
							line-height: 22rpx;
							font-weight: 400;
							color: #606366;
						}
					}
				}


			}

			.swiper_wrap {
				margin-bottom: 30rpx;
			}
		}

	}

	.empty_wrap {
		height: 300rpx;
	}

	.filter_wrap {
		padding: 40rpx 24rpx;
		background: url('../../static/filter_bg.png') no-repeat;
		background-position: left top;
		background-size: cover;

		.filter_scroll {
			max-height: 600rpx;

			.sort_wrap {
				margin-bottom: 24rpx;

				.title {
					font-size: 32rpx;
					line-height: 1.2;
					color: #262728;
					font-weight: 600;
					margin-bottom: 20rpx;
				}

				.item_wrap {
					flex-wrap: wrap;
					justify-content: flex-start;

					.item {
						min-width: 164rpx;
						padding: 0 30rpx;
						height: 64rpx;
						font-size: 24rpx;
						line-height: 64rpx;
						text-align: center;
						border-radius: 64rpx;
						background: #fff;
						margin-right: 10rpx;
						border: 1px solid #fff;
						color: #909399;
						margin-bottom: 24rpx;

						&.active {
							border-color: #007AFF;
							color: #007AFF;
						}
					}
				}
			}

			.btn_wrap {
				padding: 0 36rpx;

				.btn {
					background: linear-gradient(to bottom, #4BADFD, #2B61EB);
					border-radius: 18rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}



	.flex-start {
		display: flex;
    justify-content: flex-start;
		padding: 0 24rpx;
		padding-top: 34rpx;
		overflow-x: auto;
		.commonSty {
			color: #979CAA;
			font-family: PingFang SC;
			font-size: 32rpx;
			line-height: 32rpx;
			letter-spacing: 0px;
			height: 60rpx;
			margin-right: 40rpx;
			white-space: nowrap;
			&.activeSty {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 50rpx;
				letter-spacing: 0px;
				color: #000;
				border-bottom: 5rpx solid #4BB0FF;
				white-space: nowrap;
			}
			&:last-child {
				margin-right: 0;
			}

		}
	}
</style>